import React, { useState, useEffect } from 'react';
import { Table, Space, Form, Button, Select, Pagination, Spin } from 'antd';
import { Link } from 'react-router-dom';
import request from '../../../../http';
import { history } from 'umi';
import './group.css';

const { Option } = Select;

//孙康铭
const group = () => {
  const columns = [
    {
      title: '院系',
      dataIndex: '院系',
      key: '院系',
    },
    {
      title: '项目名称',
      dataIndex: '项目名称',
      key: '项目名称',
    },
    {
      title: '责任老师',
      dataIndex: '责任老师',
      key: '责任老师',
    },
    {
      title: '小组',
      dataIndex: '小组',
      key: '小组',
    },
    {
      title: '小组长',
      dataIndex: '小组长',
      key: '小组长',
    },
    {
      title: '项目成员',
      dataIndex: '项目成员',
      key: '项目成员',
    },
    {
      title: '综合评分',
      dataIndex: '综合评分',
      key: '综合评分',
    },
    {
      title: '作业评分',
      key: '作业评分',
      dataIndex: '作业评分',
      render: (state, record) => {
        return state == 1 ? (
          <a onClick={() => changePage(record.courseId, record.projectGrupId)}>
            查看详情
          </a>
        ) : (
          <a>未评分</a>
        );
      },
    },
  ];

  const [formObject] = Form.useForm();
  //定义表格数据
  const [data, setdata] = useState([{}]);
  const [courseName, setcourseName] = useState([]);
  const [projectGrupName, setprojectGrupName] = useState([]);
  //获取项目名称下拉框转换的ID
  const [projectId, setprojectId] = useState(0);
  const [groupId, setgroupId] = useState(0);
  //判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  //加载
  const [loading, setloading] = useState(0);

  //查看详情
  const changePage = (courseId, projectGrupId) => {
    history.push({
      pathname: '/teacher/Comprehensive/GroupComprehensive',
      query: {
        courseId: courseId,
        projectGrupId: projectGrupId,
      },
    });
  };

  //周期搜索
  useEffect(() => {
    //小组综合打分记录请求成功查询所有
    request
      .post('/scoring/a_t/queryGroupScoreCondition', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        console.log('小组综合打分记录请求成功', res);
        setloading(1);
        const datas = res.data.returnDate;
        const newP = datas.map((dataObj) => {
          return {
            院系: dataObj.dkey,
            项目名称: dataObj.courseName,
            责任老师: dataObj.responsibilityName,
            小组: dataObj.projectGrupName,
            小组长: dataObj.groupLeaderName,
            项目成员: dataObj.total,
            综合评分: dataObj.score,
            作业评分: dataObj.state,
            courseId: dataObj.courseId,
            projectGrupId: dataObj.projectGrupId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      });

    //项目名称请求
    request
      .post('/common/a_t_s/queryCourseNames')
      .then((res) => {
        // console.log("项目名称请求成功", res.data)
        const newPArray = res.data;
        setcourseName((courseName) => (courseName = newPArray));
      })
      .catch((err) => console.log('项目名称请求失败', err));

    //小组名称请求
    request
      .post('/common/a_t/queryAllProjectGroups', {
        isGraduated: 0,
      })
      .then((res) => {
        // console.log("小组名称请求成功", res.data)
        const newGArray = res.data;
        setprojectGrupName((projectGrupName) => (projectGrupName = newGArray));
      })
      .catch((err) => console.log('小组名称请求失败', err));
  }, []);

  //搜索查询
  const onBtn = () => {
    request
      .post('/scoring/a_t/queryGroupScoreCondition', {
        number: 10,
        page: 1,
        courseId: projectId || '',
        projectGrupId: groupId || '',
      })
      .then((res) => {
        console.log('搜索请求成功', res);
        const datas = res.data.returnDate;
        const newDatas = datas.map((dataObj) => {
          return {
            院系: dataObj.dkey,
            项目名称: dataObj.courseName,
            责任老师: dataObj.responsibilityName,
            小组: dataObj.projectGrupName,
            小组长: dataObj.groupLeaderName,
            项目成员: dataObj.total,
            综合评分: dataObj.score,
            作业评分: dataObj.state,
            courseId: dataObj.courseId,
            projectGrupId: dataObj.projectGrupId,
          };
        });
        setdata(newDatas);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('true');
        setpagination1('true');
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //分页搜索
  function pageChange(page, pageSize) {
    // console.log(page, pageSize);
    if (pagination == 'false') {
      // console.log("搜索之前分页")
      request
        .post('/scoring/a_t/queryGroupScoreCondition', {
          number: pageSize,
          page: page,
        })
        .then((res) => {
          // console.log("分页搜索请求成功", res)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              院系: dataObj.dkey,
              项目名称: dataObj.courseName,
              责任老师: dataObj.responsibilityName,
              小组: dataObj.projectGrupName,
              小组长: dataObj.groupLeaderName,
              项目成员: dataObj.total,
              综合评分: dataObj.score,
              作业评分: dataObj.state,
              courseId: dataObj.courseId,
              projectGrupId: dataObj.projectGrupId,
            };
          });
          setdata(newP);
        })
        .catch((err) => {
          console.log('分页失败', err);
        });
    } else if (pagination1 == 'true') {
      request
        .post('/scoring/a_t/QueryPersonalScoreCondition', {
          number: pageSize,
          page: page,
        })
        .then((res) => {
          // console.log("综合打分记录请求成功",res.data.data.returnDate)
          const datas = res.data.data.returnDate;
          const newDatas = datas.map((dataObj) => {
            return {
              院系: dataObj.dkey,
              项目名称: dataObj.courseName,
              责任老师: dataObj.responsibilityName,
              小组: dataObj.projectGrupName,
              小组长: dataObj.groupLeaderName,
              项目成员: dataObj.total,
              综合评分: dataObj.score,
              作业评分: dataObj.state,
              courseId: dataObj.courseId,
              projectGrupId: dataObj.projectGrupId,
            };
          });
          setdata(newDatas);
          setsum(res.data.data.paginationData.sum);
          setsumPage(res.data.data.paginationData.sumPage);
        })
        .catch(() => {
          alert('该查询没有数据!');
          setdata('');
        });
    }
  }

  //重置
  function onReset() {
    history.go(0);
    formObject.setFieldsValue({
      courseName: '',
      projectGrupName: '',
    });
    request
      .post('/scoring/a_t/queryGroupScoreCondition', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("综合打分记录请求成功", res)
        const datas = res.data.returnDate;
        const newP = datas.map((dataObj) => {
          return {
            院系: dataObj.dkey,
            项目名称: dataObj.courseName,
            责任老师: dataObj.responsibilityName,
            小组: dataObj.projectGrupName,
            小组长: dataObj.groupLeaderName,
            项目成员: dataObj.total,
            综合评分: dataObj.score,
            作业评分: dataObj.state,
            courseId: dataObj.courseId,
            projectGrupId: dataObj.projectGrupId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('false');
      });
  }

  return (
    <div>
      <Form form={formObject}>
        <div className="tabBar">
          <Link to="../index">
            <Button style={{ padding: '5px 50px' }}>个人评分</Button>
          </Link>
          <Button type="primary" style={{ padding: '5px 50px' }}>
            小组评分
          </Button>
        </div>
        <div className="prjName">
          项目名称:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            className="Select"
            onChange={(e, index) => {
              // setproValue(index.value)
              setprojectId(parseInt(index.key));
            }}
          >
            {courseName.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.format}>
                  {cNameObj.format}
                </Option>
              );
            })}
          </Select>
        </div>
        <div className="groupName">
          小组名称:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            className="Select"
            onChange={(e, index) => {
              // setgroValue(index.value)
              setgroupId(index.key);
            }}
          >
            {projectGrupName.map((proObj) => (
              <Option key={proObj.id} value={proObj.format}>
                {proObj.format}
              </Option>
            ))}
          </Select>
          <div className="btn">
            <Button
              type="primary"
              style={{ padding: '5px 20px' }}
              onClick={onBtn}
            >
              查询
            </Button>
            <Button style={{ padding: '5px 20px' }} onClick={onReset}>
              重置
            </Button>
          </div>
        </div>
        <div className="form">
          {loading == 0 ? (
            <div className="example">
              <Spin size="large" />
            </div>
          ) : (
            <div>
              <Table columns={columns} dataSource={data} pagination={false} />
              <div>
                <Pagination
                  total={sum}
                  onChange={pageChange}
                  hideOnSinglePage={true}
                />
              </div>
            </div>
          )}
        </div>
      </Form>
    </div>
  );
};

export default group;
